<script>

import { Search, UploadFilled, List, EditPen } from '@element-plus/icons-vue'
import { getStudentList, setRemarks } from "../../api/class";
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    data() {
        return {
            studentId: '',
            tableData: [],
            currentData: [],
            currentPage: 1,
            class1Select: '',
            class2Select: '',
        }
    },
    methods: {
        changeData() {
            this.currentData = this.tableData.slice((this.currentPage - 1) * 10, this.currentPage * 10);
        },
        getWantList() {
            getStudentList({
                type: this.class1Select,
                className: this.class2Select,
                id: this.studentId
            }).then(res => {
                if (res.code == '200') {
                    this.tableData = res.data;
                    // console.log(this.tableData[0]);
                    this.currentData = this.tableData.slice((this.currentPage - 1) * 10, this.currentPage * 10);
                } else {
                    ElMessage(res.msg)
                }
            })
        },
        addRemarks(row, remarks) {
            setRemarks({
                id: row.stuId,
                remark: remarks
            }).then(res => {
                // console.log(res);
                if (res.code == '200') {
                    this.changeData()
                } else {
                    ElMessage(res.msg)
                }
            })
        },

        // 点击查看详细信息
        checkInfo(row) {
            // console.log(row);
            ElMessageBox.alert(
                ` <div class="studentDetali">
                    <div class="left">
                        <img src="${row.stuImg}" alt="">
                    </div>
                    <div class="right">
                        <p>
                            学员昵称：<span class="box">${row.stuId}</span>
                            学员id：<span class="box">${row.stuNickname}</span>
                        </p>
                        <p>
                            真实姓名：<span class="box">${row.stuName}</span>
                            性别：<span class="box">${row.stuSex}</span>
                        </p>
                        <p>
                            毕业院校：<span class="box">${row.stuSchool}</span>
                            学历：<span class="box">${row.stuEducation}</span>
                        </p>
                        <p>
                            联系电话：<span class="box">${row.stuTel}</span>
                        </p>
                        <p>
                            家庭地址：<span class="box">${row.stuAddress}</span>
                        </p>
                        <p>
                            个性需求：<span class="box">${row.stuPersonality}</span>
                        </p>
                    </div>
                </div>`,
                '个人信息',
                {
                    customClass:"persdsd",
                    dangerouslyUseHTMLString: true,
                  
                }
            )
        },
        // 查看学习情况
        checkGradeInfo(row){
            console.log(row.stuGrade);
            ElMessageBox.alert(
                ` <div>
                    <p>
                        <span>离散分析:</span>
                        <span>${row.stuGrade['离散分析']}</span>
                    </p>
                    <p>
                        <span>线性代数:</span>
                        <span>${row.stuGrade['线性代数']}</span>
                    </p>
                    <p>
                        <span>微积分:</span>
                        <span>${row.stuGrade['微积分']}</span>
                    </p>
                    <p>
                        <span>高等数学:</span>
                        <span>${row.stuGrade['高等数学']}</span>
                    </p>
                    <p>
                        <span>前端HTML5:</span>
                        <span>${row.stuGrade['前端HTML5']}</span>
                    </p>
                </div>`,
                '学习情况',
                {
                    // customClass:"persdsd",
                    dangerouslyUseHTMLString: true,
                  
                }
            )
        }
    },
    components: {
        Search,
        UploadFilled,
        List,
        EditPen,
    },
    mounted() {
        getStudentList().then(res => {
            this.tableData = res.data
            // console.log(this.tableData[0]);
            this.currentData = this.tableData.slice((this.currentPage - 1) * 10, this.currentPage * 10);
        })
    },

}
</script>
<template>
    <div class="studentList">
        <div class="operation">
            <label for="">科目选择</label>
            <el-select v-model="class1Select" style="width: 115px" placeholder=" ">
                <el-option value="" />
                <el-option value="离散分析" />
                <el-option value="线性代数" />
                <el-option value="微积分" />
                <el-option value="高等数学" />
                <el-option value="前端HTML5" />
            </el-select>
            <label for="">班级选择</label>
            <el-select v-model="class2Select" style="width: 115px" placeholder=" ">
                <el-option value="" />
                <el-option value="2210" />
                <el-option value="2211" />
                <el-option value="2212" />
                <el-option value="2213" />
                <el-option value="2214" />
                <el-option value="2215" />
            </el-select>
            <el-input class="stuid" v-model="studentId" placeholder="搜索学员ID或学员昵称">
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>
            <el-button class="btn">
                <el-icon>
                    <UploadFilled />
                </el-icon>导出</el-button>
            <el-button class="btn" @click="getWantList">
                <el-icon>
                    <List />
                </el-icon>查询
            </el-button>

        </div>
        <el-table :data="currentData">
            <el-table-column prop="stuId" label="学员ID" width="180" />
            <el-table-column prop="stuNickname" label="学员昵称" width="180" />
            <el-table-column prop="stuTel" label="联系电话" width="180" />
            <el-table-column prop="plan" label="本周任务完成度" width="180" />
            <el-table-column prop="stuRemarks" label="备注" width="180" class="remarks">
                <template #default="scope">
                    <div>
                        <el-input v-model="scope.row.remarks">
                            <template #suffix>
                                <el-icon @click="addRemarks(scope.row, scope.row.remarks)">
                                    <EditPen />
                                </el-icon>
                            </template>
                        </el-input>

                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作" class="check" @click="checkInfo">
                <template #default="scope">
                    <div>
                        <span class="check" @click="checkInfo(scope.row)">查看个人信息</span>
                        &emsp;
                        <span class="check" @click="checkGradeInfo(scope.row)">学习情况</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage" @currentChange="changeData" layout="prev, pager, next, jumper"
            :total="tableData.length" />
    </div>
</template>
<style scoped lang="scss">
.stuid {
    width: 200px;
    margin: 0 20px;
}

.el-select {
    width: 200px;
    margin: 0 20px;
}

.operation {
    color: black;
    margin-bottom: 30px;

    .btn {
        width: 100px;
        background-color: blue;
        float: right;
        margin-right: 20px;
        color: white;
    }
}

.el-input__prefix-inner {
    color: black;
}

.el-table {
    --el-table-header-bg-color: #4b19d1;
    margin-bottom: 20px;

}

.check {
    color: #4b19d1;
    cursor: pointer;
}

.remarks {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.studentList {
    display: flex;
    flex-direction: column;
    align-items: center;
}

//学生信息弹出框

.persdsd{
    background-color: red;
    .studentDetali {
        background-color: #4b19d1;
        .left{
            overflow: hidden;
            float: left;
            width: 100px;
            height: 110px;
            img{
                width: 80px;
                height: 80px;
            }
        }
    
        .right{
            float: left;
            .box{
                width: 120px;
                height: 25px;
                line-height: 25px;
                border: 1px solid #ccc;
            }
        }
    
    }
}
</style>